{% extends 'KeioStudyBundle::layout.html.twig' %}

{% block content %}
    <h2 style="padding-bottom:20px">Danh sách môn học</h2>

    <table class="records_list" width="100%">
        <thead>
            <tr>
                <th class="records_list" style="width:7%; text-align:center">STT</th>
                <th class="records_list">Môn học</th>
                <th class="records_list" style="width:80px; text-align:center">Actions</th>
            </tr>
        </thead>
        <tbody>
        {% set sothutu = 0 %}
        {% for entity in entities %}
        {% set sothutu = sothutu+1 %}
            <tr
        	{% if sothutu is divisibleby(2) %}
        	class="records_list_chan"
	        {% endif %}
	        >
                <td class="records_list" align="center">{{ sothutu }}</td>
                <td class="records_list">{{ entity.name }}</td>
                <td class="records_list">
        	      <table width=100%>
    	            <tr>
	                  <td style="width:50%;">
                	<form action="{{ path('keio_monhoc_delete', { 'id': entity.id }) }}" method="post">
            	        {{ form_widget(entity.delform) }}
            	        <div id="record_list">
	        	            <input title="Delete" type="image" src="{{ asset('icons/delete.png') }}" onclick="return confirm('Chắc chắn xóa không?')" />
	        	        </div>
    	            </form>
	                  </td>
                	  <td style="width:50%; padding-left:5px">
            	        <a href="{{ path('keio_monhoc_edit', { 'id': entity.id }) }}"><img title="Edit" src="{{ asset('icons/edit.png') }}" /></a>
        	          </td>
    	            </tr>
	              </table>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>



<div id="dialog-form" title="Tạo môn học mới">
  <p class="validateTips">Hãy nhập tên môn học</p>
  <form id="frm_monhoc" action="{{ path('keio_monhoc_create') }}" method="post" {{ form_enctype(form) }}>
  <fieldset>
    <label for="name">Tên môn học</label>
    <input type="text" id="name" name="keio_studybundle_monhoctype[name]"/>
    {{ form_widget(form._token) }}
  </fieldset>
  </form>
</div>

<p style="padding-top:15px">
<button id="create-new">Thêm môn học mới</button>
</p>
    {% endblock %}



{% block morejavascripts %}
  <link rel="stylesheet" href="{{ asset('css/modal-form.css') }}" media="screen" type="text/css" />
  <script>
  $(function() {
    var name = $( "#name" ),
      allFields = $( [] ).add( name ),
      tips = $( ".validateTips" );

    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Tên của trường \"" + n + "\" phải dài từ " +
          min + " đến " + max + " ký tự." );
        return false;
      } else {
        return true;
      }
    }

    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 250,
      width: 400,
      modal: true,
      buttons: {
        "Thêm môn học mới": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );

          bValid = bValid && checkLength( name, "Tên môn học", 3, 55 );

          bValid = bValid && checkRegexp( name, /\S/, "Tên môn học phải không được bỏ trống" );
          // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
          if ( bValid ) {
            document.getElementById("frm_monhoc").submit();
            $( this ).dialog( "close" );
          }
        },
        Hủy: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
      }
    });

    $( "#create-new" )
      .button()
      .click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
  });
  </script>
{% endblock %}